<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>服务申请 - 活力长者社区</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .service-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
        }

        .service-header {
            margin-bottom: 30px;
        }

        .service-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .form-label {
            font-weight: 500;
        }

        .btn-submit {
            background-color: #28a745;
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
        }

        .btn-submit:hover {
            background-color: #218838;
            color: white;
        }

        .btn-cancel {
            background-color: #6c757d;
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .btn-cancel:hover {
            background-color: #5a6268;
            color: white;
        }

        #successAlert {
            display: none;
        }
    </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="service-container">
    <div class="service-header">
        <h2>生活服务申请</h2>
        <p class="text-muted">为入住人申请生活服务</p>
    </div>

    <!-- 成功提示框 -->
    <c:if test="${not empty success}">
        <div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
            <strong>申请成功！</strong> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </c:if>

    <c:if test="${not empty error}">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>错误！</strong> ${error}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </c:if>

    <form id="serviceForm" action="ServiceRequestServlet" method="post">
        <div class="service-card">
            <h3 class="card-title">选择服务对象</h3>
            <div class="mb-4">
                <label class="form-label">选择入住人</label>
                <select class="form-select" name="residenceId" required>
                    <option value="">-- 请选择入住人 --</option>
                    <c:choose>
                        <c:when test="${not empty memberInfo.purchasedHouses}">
                            <c:forEach items="${occupants}" var="occupant">
                                <option value="${occupant.residenceId}">
                                        ${occupant.occupantName} (${occupant.relationship})
                                </option>
                            </c:forEach>
                        </c:when>
                    </c:choose>

                </select>
            </div>
        </div>

        <div class="service-card">
            <h3 class="card-title">服务信息</h3>
            <div class="mb-3">
                <label class="form-label">服务类型</label>
                <select class="form-select" name="serviceType" required>
                    <option value="">-- 请选择服务类型 --</option>
                    <option value="日常照料">日常照料</option>
                    <option value="健康检查">健康检查</option>
                    <option value="康复护理">康复护理</option>
                    <option value="餐饮服务">餐饮服务</option>
                    <option value="心理疏导">心理疏导</option>
                    <option value="陪同就医">陪同就医</option>
                </select>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">服务日期</label>
                    <input type="date" class="form-control" name="serviceDate" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">服务时间</label>
                    <select class="form-select" name="serviceTime" required>
                        <option value="">-- 请选择时间 --</option>
                        <option value="08:00">08:00</option>
                        <option value="09:00">09:00</option>
                        <option value="10:00">10:00</option>
                        <option value="11:00">11:00</option>
                        <option value="14:00">14:00</option>
                        <option value="15:00">15:00</option>
                        <option value="16:00">16:00</option>
                    </select>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">服务时长</label>
                <div class="d-flex align-items-center">
                    <input type="range" class="form-range" name="duration" min="30" max="240" step="30" value="60">
                    <span class="ms-3" id="durationValue">60分钟</span>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">特殊要求</label>
                <textarea class="form-control" name="specialRequest" rows="3"></textarea>
            </div>
        </div>

        <div class="d-flex justify-content-end">
            <a href="memberHome.jsp" class="btn btn-cancel">取消</a>
            <button type="submit" class="btn btn-submit">提交申请</button>
        </div>
    </form>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 更新时长显示
    const durationSlider = document.querySelector('input[name="duration"]');
    const durationValue = document.getElementById('durationValue');

    durationSlider.addEventListener('input', function() {
        durationValue.textContent = this.value + '分钟';
    });

   /* // 页面加载时显示成功提示（如果有）
    document.addEventListener('DOMContentLoaded', function() {
        const successAlert = document.getElementById('successAlert');

        // 如果后端设置了success属性，显示提示框
        if(successAlert) {
            successAlert.style.display = 'block';

            // 自动滚动到提示框位置
            successAlert.scrollIntoView({ behavior: 'smooth' });

            // 10秒后自动隐藏
            setTimeout(() => {
                const alert = bootstrap.Alert.getInstance(successAlert);
                if(alert) alert.close();
            }, 10000);
        }
    });*/
</script>
</body>
</html>